<script setup>
import { useUserStore } from '@/stores/modules/user'
import { WarnTriangleFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'

const userStore = useUserStore()
const amounts = [10, 20, 50, 100]
const selectedAmount = ref(10)
const paymentMethod = ref('alipay')

const user = userStore.user

const recharge = async (userId, amount) => {
  let moneySum = amount + parseInt(userStore.user.money)
  console.log('充值', userId, amount, userStore.user.money, moneySum)
  await ElMessageBox.confirm(`你确定要充值${amount}元吗?`, '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    icon: WarnTriangleFilled,
    draggable: true
  })
  await userStore.updateMoney(userId, moneySum)
  await userStore.getUser(userId)
}
</script>
<template>
  <div class="recharge-container">
    <div class="bottom">
      <h3>充值页面</h3>
      <!--  显示个人账户余额 -->
      <div class="top">
        <!-- <div class="title">个人账户余额</div> -->
        <div class="balance">
          <span
            >账户余额：<span class="money"> {{ userStore.user.money || 0 }}</span
            >元</span
          >
        </div>
      </div>
      <!-- 充值金额选择 -->
      <br />
      <div class="amount">
        <h4>充值金额:</h4>
        <el-radio-group v-model="selectedAmount">
          <el-radio-button
            v-for="amount in amounts"
            :label="amount"
            :key="amount"
            style="margin-right: 20px"
            >{{ amount }}元</el-radio-button
          >
        </el-radio-group>
      </div>
      <!-- 支付方式选择 -->

      <div class="payment-method">
        <h4>选择支付方式：</h4>
        <el-radio-group v-model="paymentMethod">
          <el-radio :label="'alipay'">支付宝</el-radio>
          <el-radio :label="'wechat'">微信支付</el-radio>
        </el-radio-group>
      </div>

      <!-- 充值按钮 -->
      <div class="recharge-btn">
        <el-button type="primary" @click="recharge(user.id, selectedAmount)">确定充值</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.recharge-container {
  width: 100%;
  height: 100%;
  background-color: rgb(251, 251, 234);
  border-radius: 10px;

  .bottom {
    padding: 20px;
    font-size: 24px;

    h3 {
      margin: 0;

      padding: 0;
    }

    .title {
      font-weight: bold;
      margin-right: 30px;
    }

    .top {
      width: 100%;
      display: flex;
      justify-content: right;

      .balance {
        font-weight: bold;
        margin-top: 20px;
        margin-right: 10px;

        .money {
          color: #34b536;
        }
      }
    }
  }

  .amount {
    display: flex;

    h4 {
      margin-right: 20px;
    }
  }

  .payment-method {
    display: flex;
    margin-top: 20px;
  }

  .recharge-btn {
    margin-top: 20px;
    margin-left: 50%;
  }
}
</style>
